import { useEffect } from "react"
import * as THREE from 'three';

/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-10-19 11:35:36
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-10-19 16:29:58
 * @FilePath: /three-react/src/pages/Base.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

const width = window.innerWidth - 200;
const height = window.innerHeight

function createRender (width, height) {

    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机
    const camera = new  THREE.PerspectiveCamera(45, width/height, 1, 500);
    camera.position.set(0,0,100);
    camera.lookAt(0,0,0);
    // 创建webgl渲染器
    const renderer = new THREE.WebGLRenderer();
    // 设置渲染器窗口大小
    renderer.setSize(width, height);
    document.getElementById("container")?.appendChild(renderer.domElement);

    // 创建几何体
    const positions = []
    positions.push(new THREE.Vector3(-10,0,0));
    positions.push(new THREE.Vector3(0,10,0));
    positions.push(new THREE.Vector3(10,0,0));
    const geometry = new THREE.BufferGeometry();
    geometry.setFromPoints(positions);

    // 创建基础材质
    const material = new THREE.LineBasicMaterial({ color: '#ff0000'})
    // 创建一个网格将几何体和材质组合在一起
    const line = new THREE.Line(geometry, material)
    // 将组合好的几何体加入到场景中
    scene.add(line)

  

    
    function animate() {
      // requestAnimationFrame(animate)
      // line.rotation.y += 0.01;
      // 渲染场景
      renderer.render(scene, camera);
    }

    animate();
    return renderer
}
export default function Lines() { 
  useEffect(() => {
    if(!window.isMounted) {
      createRender(width, height);
      window.isMounted = true;
    }
  }, [])
  return (
    <div id="container"></div>
  )
}